<template>
  <BasicDrawer
      :destroyOnClose="true"
      v-bind="$attrs"
      @register="registerDrawer"
      :showFooter="false"
      :title="state.title"
      width="720px"
      :maskClosable="false">

    <BasicTable @register="registerTable" :resizeHeightOffset="44">
      <template #form-advanceAfter>
        <a-space gap="small">
          <a-button type="primary" @click="onAnonymity">散客收银</a-button>
        </a-space>
      </template>

      <template #action="{ record }">
        <TableAction
            :divider="true"
            :actions="[
                  {
                    color: 'success',
                    label: '选择',
                    onClick: () => onSelect(record),
                  },
                ]"
        />
      </template>
    </BasicTable>

  </BasicDrawer>
</template>

<script setup>
import {defineOptions, reactive} from 'vue';

import {BasicDrawer, useDrawerInner} from '@/components/Drawer';

import {DELETE, PAGE} from '@/api/http';
import {useMessage} from '@/hooks/web/useMessage';
import {getLabel, memberTypeList,} from '@/api/ds.js';
import {BasicTable, TableAction, useTable} from "@/components/Table";
import dayjs from "dayjs";
import { omit } from 'lodash-es';
defineOptions({name: 'SelectMember'});

const emit = defineEmits(['complete']);
const state = reactive({title: ''});

const {createMessage, createConfirm} = useMessage();

const [registerTable, {reload}] = useTable({
  api: (data) => PAGE('/membership/getMemberInfoList')(data.nameOrMobileLike ? data : omit(data, 'nameOrMobileLike')),
  formConfig: {
    baseColProps: {style: {paddingRight: '12px'}},
    actionColOptions: {span: 12},
    schemas: [
      {
        field: 'nameOrMobileLike',
        component: 'Input',
        componentProps: {
          placeholder: ' 输入客户姓名/手机号搜索',
        },
        colProps: {span: 12},
      }
    ],
  },
  columns: [
    {
      title: '客户姓名',
      dataIndex: 'realName',
      ellipsis: false,
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      ellipsis: false,
    },

    {
      title: '客户类型',
      dataIndex: 'memberType',
      ellipsis: false,
      customRender: ({value}) => getLabel(memberTypeList, value),
    },
  ],
  useSearchForm: true,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  rowKey: 'memberCode',
  actionColumn: {
    title: '操作',
    align: 'center',
    width: 90,
    dataIndex: 'action',
    fixed: 'right',
    slots: {customRender: 'action'},
  },
});

const [registerDrawer, {closeDrawer}] = useDrawerInner(() => {
  state.title = '选择客户';
});

async function onSelect({memberCode}) {
  const workDate = dayjs().format('YYYY-MM-DD');

  // workDate非必传
  const {list} = await PAGE('/cashier/getPendingOrder')({
    memberCode,
    // workDate,
    currentPage: 1, pageSize: 999999
  }) ?? {};

  const target = list?.[0];
  if (!target) {
    emit('complete', {memberCode});
    closeDrawer();
  } else {
    createConfirm({
      content: '该客户还有未完成的挂单，是否继续开单？',
      okText: '继续开单',
      cancelText: '忽略，重新开单',
      onOk: async () => {
        emit('complete', {memberCode, takeId: target.id});
        closeDrawer();
      },
      onCancel: async () => {
        await DELETE('/cashier/delPendingOrder', {memberCode, id: target.id});
        emit('complete', {memberCode});
        closeDrawer();
      }
    });
  }
}

function onAnonymity() {
  emit('complete', {memberCode: '-1'});
  closeDrawer();
}
</script>

<style lang="less" scoped>
</style>
